import React, {useState} from 'react';
import PropTypes from 'prop-types';
import { Pagination } from 'antd';
import { Scrollbars } from 'react-custom-scrollbars';
import classnames from 'classnames/bind';

import Loading from '../../common/Loading';

import style from './LayerList.module.scss';

const cb = classnames.bind(style);

const LayerList = (props) => {
    const {left, total, layerDatas, pageInfo, curLayerCode, pageChange, featureNames, getFeatureDetail, closeLayerListPanel, loading=false} = props;
    const {page, size} = pageInfo;
    const [selectFeatureCode, setSelectFeatureCode] = useState('');         // 当前选中要素code值
    const [isToggle, setIsToggle] = useState(true);

    // 要素点击事件
    const featureClick = (uid, code, layerName) => {
        getFeatureDetail(uid, code, layerName);
        setSelectFeatureCode(uid);
    };   
    
    // 页码变化事件
    const onChange = (page, pageSize) => {
        pageChange({page: page, size: pageSize});
    };

    // 图层详情内容
    const layerDataCom = layerDatas.map((item, index) => {
        const {uid, image='', name=null, code='', layerName=''} = item;
        const imageLength = image.split(',').length;
        const detailContentClass = cb({
            detailContent: true,
            detailContentSelected: uid === selectFeatureCode
        });
        
        let content = item[featureNames[curLayerCode]] ? item[featureNames[curLayerCode]] : '-';
        
        // 文化礼堂特殊处理 
        if(curLayerCode === 41){
            content = content? `${content}文化礼堂` : '-';
        }
        return (
            <div className={style.layerDetailItem} key={index}>
                <div className={detailContentClass} onClick={() => featureClick(uid, code, layerName)}>
                    <div className={style.uid}><span>{index + 1}</span></div>
                    <div className={style.layer}><span>{name || content}</span></div>
                    {imageLength > 1 ? 
                        <div className={style.picture}><span className={style.isPicture}>已上传</span></div> : 
                        <div className={style.picture}><span className={style.unPicture}>未上传</span></div>
                    }
                </div>
            </div>
        );
    });

    const layerListStyle = {
        left: `${left}px`
    }

    return (
        <div className={style.layerList} style={layerListStyle}>
            <div className={style.header}>
                <span>搜索结果</span>
                <div>
                    <span className={style.iconBox}>
                        {
                            isToggle ? <i className="iconfont icon-toggle-top" onClick={() => setIsToggle(!isToggle)}></i>:
                            <i className="iconfont icon-toggle-bottom" onClick={() => setIsToggle(!isToggle)}></i>
                        }
                    </span>
                    <i className="iconfont icon-close" onClick={closeLayerListPanel}></i>
                </div>
            </div>  
            {
                isToggle &&
                <>
                    <Scrollbars autoHeight autoHeightMin={0} autoHeightMax={`calc(100vh - 230px)`}>
                        <div className={style.content}>
                            {
                                loading ? 
                                <Loading />: 
                                layerDatas.length > 0 ? 
                                layerDataCom:
                                <div className={style.noContent}>无搜索结果！</div>
                            }         
                        </div> 
                    </Scrollbars>  
                    {
                        layerDatas.length > 0 && 
                        <div className={style.footer}>
                            <Pagination 
                                total={total} 
                                size="small" 
                                showLessItems="true" 
                                defaultPageSize={20}
                                defaultCurrent={1}
                                current={page}
                                pageSize={size}
                                onChange={onChange}/>
                        </div>
                    }
                </>
            }
            
            
        </div>
    )
};

LayerList.propTypes = {
    loading: PropTypes.bool,
    left: PropTypes.number,
    curLayerCode: PropTypes.string,
    pageInfo: PropTypes.object,
    layerDatas: PropTypes.array,
    getFeatureDetail: PropTypes.func,
    closeLayerListPanel: PropTypes.func,
    pageChange: PropTypes.func,
    total: PropTypes.number,
};


export default LayerList;